<template>
  <editor-content v-if="editor" :editor="editor" />
  <button @click="handleGetIns">getIns</button>
</template>

<script lang="ts" setup>
// import StarterKit from "@tiptap/starter-kit";
import Document from "@tiptap/extension-document";
import Paragraph from "@tiptap/extension-paragraph";
import Text from "@tiptap/extension-text";
import Bold from "@tiptap/extension-bold";
import { EditorContent, Editor } from "@tiptap/vue-3";
// import { ColorHighlighter } from "./ColorHighlighter.ts";
// import { SmilieReplacer } from "./SmilieReplacer.ts";
import getDataMention from "./dataSuggestion.ts";
import getFunctionMention from "./functionSuggestion.ts";
import Ast from "../ast";
import { onMounted, ref } from "vue";

const editor = ref<Editor>();

const astInstance = ref<Ast>();

const handleGetIns = () => {
  if (!editor.value || !astInstance.value) return;
  const formulaStr = editor.value?.getText();
  astInstance.value.gen(formulaStr).catch((res) => {
    if (res.hasOwnProperty("at")) {
      const at = res.at;
      console.log("debug-> ~ handleGetIns ~ at:", at);
    }
  });
};

const getFncs = () => {
  const formulaList = [
    { name: "取整", desc: "=INT(数值)", label: "INT", value: "int" },
    { name: "求余数", desc: "=MOD(除数，被除数)", label: "MOD", value: "mod" },
    { name: "求和", desc: "=SUM(数值1，数值2，…)", label: "SUM", value: "sum" },
    {
      name: "求平均值",
      desc: "=AVERAGE(数值1，数值2，…)",
      label: "AVERAGE",
      value: "average",
    },
    {
      name: "求最大值",
      desc: "=MAX(数值1，数值2，…)",
      label: "MAX",
      value: "max",
    },
  ];
  return Promise.resolve(formulaList);
};

const getDatas = () => {
  const formulaDataList = [
    {
      name: "上金所回购价格",
      desc: "SGA_BUY",
      label: "SGA_BUY",
      value: "sgs_buy",
    },
  ];
  return Promise.resolve(formulaDataList);
};

const init = async () => {
  try {
    const fnlist = await getFncs();
    const datalist = await getDatas();
    const DataMention = getDataMention(datalist);
    const FunctionMention = getFunctionMention(fnlist);
    editor.value = new Editor({
      extensions: [
        Document,
        Text,
        Bold,
        Paragraph,
        DataMention,
        FunctionMention,
        // ColorHighlighter,
        // SmilieReplacer,
      ],
      content: ``,
    });
    astInstance.value = new Ast({
      fncs: fnlist.map((item) => item.label),
      datas: datalist.map((item) => item.label),
    });
  } catch (error) {
    throw error;
  }
};

onMounted(() => {
  init();
});
</script>

<style lang="scss">
/* Basic editor styles */
.tiptap {
  caret-color: var(--purple);
  margin: 1.5rem;

  &:focus {
    outline: none;
  }
  :first-child {
    margin-top: 0;
  }

  /* Code and preformatted text styles */
  code {
    background-color: var(--purple-light);
    border-radius: 0.4rem;
    color: var(--black);
    font-size: 0.85rem;
    padding: 0.25em 0.3em;
  }

  /* Color swatches */
  .color {
    white-space: nowrap;

    &::before {
      background-color: var(--color);
      border: 1px solid rgba(128, 128, 128, 0.3);
      border-radius: 2px;
      content: " ";
      display: inline-block;
      height: 1em;
      margin-bottom: 0.15em;
      margin-right: 0.1em;
      vertical-align: middle;
      width: 1em;
    }
  }

  .formula-tag {
    background-color: #3889eb;
    padding: 2px 4px;
    color: #fff;
  }
  .char-tag {
    color: #323233;
  }
  .data-tag {
    background-color: #199d21;
    padding: 2px;
    color: #fff;
  }
}
</style>
